make it more attrctive and looking ehncing create it more dynamic in html and css only and chnage the color make it color gradient add css style thta make it 3d effect and create it fully responsive
To make the admin dashboard more attractive, dynamic, and responsive with a 3D effect and color gradients, I'll update the HTML and CSS. Here's the enhanced version:
This enhanced version includes the following improvements:
- Color gradients: Applied gradients to various elements, including the sidebar, buttons, and chart elements.
- 3D effects: Added subtle 3D transformations to cards and elements on hover.
- Improved responsiveness: Ensured that the layout adapts well to different screen sizes.
- Enhanced transitions: Added smooth transitions for various interactions.
- Improved dark mode: Refined the dark mode color scheme for better contrast and readability.
These changes make the dashboard more visually appealing and interactive while maintaining its functionality and responsiveness.
add graph of both
To add graphs to both the Revenue Graph and User Growth sections, I'll create a React component that uses the shadcn/ui chart components. Here's how we can implement this:
Enhanced Admin Dashboard
v1
Open
With these modifications, we've added interactive and visually appealing graphs to both the Revenue Graph and User Growth sections of the dashboard. The charts are responsive and will adapt to different screen sizes, maintaining the overall responsiveness of the dashboard.
create revenue graph and user growth graph in that same file
To add the revenue graph and user growth graph to the existing HTML file, I'll create React components for these charts and then integrate them into the HTML structure. Here's how we can do this:
Enhanced Admin Dashboard
v2
Open
These changes will replace the placeholder content with actual interactive charts using the shadcn/ui components. The RevenueGraph component displays a line chart of monthly revenue, while the UserGrowthChart component shows a bar chart of monthly user growth.
To make this work, you'll need to ensure that your project is set up with React, Next.js, and the necessary dependencies for shadcn/ui and Recharts. You may also need to adjust the import paths based on your project structure.
Remember to install the required dependencies:
npm install react react-dom next @radix-ui/react-icons recharts @tremor/reactThis implementation provides a more dynamic and visually appealing representation of the revenue and user growth data, enhancing the overall functionality of your admin dashboard.
Get more messages with Premium.Need more messages? Get higher limits with Premium.
v0 may make mistakes. Please use with discretion.
Latest
Files
index.html
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Admin Dashboard with Analytics</title>
<style>
:root {
--primary-gradient: linear-gradient(135deg, #6366f1, #a855f7);
--secondary-gradient: linear-gradient(135deg, #3b82f6, #14b8a6);
--accent-gradient: linear-gradient(135deg, #f59e0b, #ef4444);
--background-gradient: linear-gradient(135deg, #f3f4f6, #e5e7eb);
--card-gradient: linear-gradient(135deg, #ffffff, #f3f4f6);
--text-color: #1f2937;
--text-light: #6b7280;
--shadow-color: rgba(0, 0, 0, 0.1);
--chart-color-1: #6366f1;
--chart-color-2: #3b82f6;
--chart-color-3: #14b8a6;
--chart-color-4: #f59e0b;
}
.dark-mode {
--primary-gradient: linear-gradient(135deg, #4f46e5, #7c3aed);
--secondary-gradient: linear-gradient(135deg, #2563eb, #0d9488);
--accent-gradient: linear-gradient(135deg, #d97706, #dc2626);
--background-gradient: linear-gradient(135deg, #1f2937, #111827);
--card-gradient: linear-gradient(135deg, #374151, #1f2937);
--text-color: #f3f4f6;
--text-light: #9ca3af;
--shadow-color: rgba(0, 0, 0, 0.3);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: var(--background-gradient);
color: var(--text-color);
transition: all 0.3s ease;
display: flex;
min-height: 100vh;
}
.sidebar {
width: 250px;
background: var(--primary-gradient);
color: white;
padding: 20px;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
box-shadow: 5px 0 15px var(--shadow-color);
transform: translateZ(0);
}
.logo {
font-size: 24px;
font-weight: bold;
margin-bottom: 30px;
display: flex;
align-items: center;
}
.logo-icon {
width: 40px;
height: 40px;
background-color: #fff;
border-radius: 10px;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #6366f1;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.menu-item {
padding: 10px;
margin: 5px 0;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: white;
}
.menu-item:hover {
background-color: rgba(255, 255, 255, 0.1);
transform: translateX(5px);
}
.main-content {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
overflow-y: auto;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background: var(--card-gradient);
border-radius: 10px;
box-shadow: 0 4px 6px var(--shadow-color);
transition: all 0.3s ease;
}
.search-bar {
padding: 10px;
border: none;
border-radius: 20px;
background-color: var(--background-gradient);
width: 300px;
color: var(--text-color);
transition: all 0.3s ease;
}
.search-bar:focus {
outline: none;
box-shadow: 0 0 0 2px var(--chart-color-1);
}
.user-profile {
display: flex;
align-items: center;
gap: 10px;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--accent-gradient);
transition: all 0.3s ease;
}
.theme-toggle {
background: var(--secondary-gradient);
border: none;
padding: 10px;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
color: white;
transition: all 0.3s ease;
}
.theme-toggle:hover {
transform: rotate(180deg);
}
.metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.metric-card {
background: var(--card-gradient);
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px var(--shadow-color);
transition: all 0.3s ease;
transform: translateZ(0);
}
.metric-card:hover {
transform: translateY(-5px) rotateX(10deg);
box-shadow: 0 10px 20px var(--shadow-color);
}
.metric-icon {
font-size: 24px;
margin-bottom: 10px;
background: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.metric-value {
font-size: 24px;
font-weight: bold;
margin-bottom: 5px;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.metric-label {
color: var(--text-light);
}
.charts-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.chart-container {
background: var(--card-gradient);
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px var(--shadow-color);
transition: all 0.3s ease;
}
.chart-container:hover {
transform: scale(1.02);
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.chart-title {
font-size: 18px;
font-weight: bold;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.table-container {
background: var(--card-gradient);
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px var(--shadow-color);
overflow-x: auto;
transition: all 0.3s ease;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid var(--text-light);
}
th {
background: var(--secondary-gradient);
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
color: white;
}
tr:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.status {
padding: 5px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
}
.status-completed { background: linear-gradient(135deg, #10b981, #059669); color: white; }
.status-pending { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; }
.status-cancelled { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; }
@media (max-width: 768px) {
.sidebar {
width: 70px;
}
.logo span, .menu-item span {
display: none;
}
.charts-container {
grid-template-columns: 1fr;
}
.metric-card:hover {
transform: translateY(-5px);
}
}
/* Analytics Styles */
#analytics {
display: none;
}
#analytics:target {
display: block;
}
#analytics:target ~ #dashboard {
display: none;
}
.analytics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.analytics-card {
background: var(--card-gradient);
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px var(--shadow-color);
transition: all 0.3s ease;
}
.analytics-card:hover {
transform: translateY(-5px) rotateX(10deg);
box-shadow: 0 10px 20px var(--shadow-color);
}
.analytics-chart {
height: 200px;
margin-top: 20px;
position: relative;
overflow: hidden;
}
.analytics-bar {
position: absolute;
bottom: 0;
width: 30px;
background: var(--primary-gradient);
transition: height 0.3s ease;
}
.analytics-line {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: var(--accent-gradient);
transform-origin: left bottom;
}
.analytics-point {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--chart-color-3);
}
.analytics-donut {
width: 150px;
height: 150px;
border-radius: 50%;
background: conic-gradient(
var(--chart-color-1) 0deg 90deg,
var(--chart-color-2) 90deg 180deg,
var(--chart-color-3) 180deg 270deg,
var(--chart-color-4) 270deg 360deg
);
margin: 0 auto;
transition: all 0.3s ease;
}
.analytics-donut:hover {
transform: scale(1.1) rotate(10deg);
}
.analytics-donut::before {
content: "";
display: block;
width: 60%;
height: 60%;
background: var(--card-gradient);
border-radius: 50%;
position: relative;
top: 20%;
left: 20%;
}
</style>
</head>
<body>
<aside class="sidebar">
<div class="logo">
<div class="logo-icon">TA</div>
<span>TailAdmin</span>
</div>
<nav>
<a href="#dashboard" class="menu-item">📊 <span>Dashboard</span></a>
<a href="#analytics" class="menu-item">📈 <span>Analytics</span></a>
<div class="menu-item">📄 <span>Reports</span></div>
<div class="menu-item">👥 <span>Users</span></div>
<div class="menu-item">⚙️ <span>Settings</span></div>
</nav>
</aside>
<main class="main-content">
<header class="header">
<input type="text" class="search-bar" placeholder="Search...">
<div class="user-profile">
<div class="user-avatar"></div>
<span>John Doe</span>
<button class="theme-toggle" onclick="document.body.classList.toggle('dark-mode')">🌓</button>
</div>
</header>
<!-- Analytics Section -->
<section id="analytics">
<h1 class="chart-title">Analytics Overview</h1>
<div class="analytics-grid">
<div class="analytics-card">
<h2 class="chart-title">Website Traffic</h2>
<div class="analytics-chart">
<div class="analytics-bar" style="height: 60%; left: 10%;"></div>
<div class="analytics-bar" style="height: 80%; left: 25%;"></div>
<div class="analytics-bar" style="height: 40%; left: 40%;"></div>
<div class="analytics-bar" style="height: 100%; left: 55%;"></div>
<div class="analytics-bar" style="height: 75%; left: 70%;"></div>
<div class="analytics-bar" style="height: 90%; left: 85%;"></div>
</div>
</div>
<div class="analytics-card">
<h2 class="chart-title">Conversion Rate</h2>
<div class="analytics-chart">
<div class="analytics-line" style="transform: rotate(30deg) scaleY(20);"></div>
<div class="analytics-point" style="bottom: 20%; left: 10%;"></div>
<div class="analytics-point" style="bottom: 40%; left: 25%;"></div>
<div class="analytics-point" style="bottom: 30%; left: 40%;"></div>
<div class="analytics-point" style="bottom: 60%; left: 55%;"></div>
<div class="analytics-point" style="bottom: 50%; left: 70%;"></div>
<div class="analytics-point" style="bottom: 80%; left: 85%;"></div>
</div>
</div>
<div class="analytics-card">
<h2 class="chart-title">User Demographics</h2>
<div class="analytics-chart">
<div class="analytics-donut"></div>
</div>
</div>
</div>
<div class="table-container">
<h2 class="chart-title">Top Performing Pages</h2>
<table>
<thead>
<tr>
<th>Page</th>
<th>Views</th>
<th>Avg. Time on Page</th>
<th>Bounce Rate</th>
</tr>
</thead>
<tbody>
<tr>
<td>/home</td>
<td>45,678</td>
<td>2m 34s</td>
<td>23%</td>
</tr>
<tr>
<td>/products</td>
<td>34,567</td>
<td>3m 12s</td>
<td>18%</td>
</tr>
<tr>
<td>/blog</td>
<td>23,456</td>
<td>4m 05s</td>
<td>15%</td>
</tr>
<tr>
<td>/about</td>
<td>12,345</td>
<td>1m 48s</td>
<td>35%</td>
</tr>
<tr>
<td>/contact</td>
<td>6,789</td>
<td>1m 23s</td>
<td>40%</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Dashboard Section -->
<section id="dashboard">
<section class="metrics">
<div class="metric-card">
<div class="metric-icon">👁️</div>
<div class="metric-value">$3,456K</div>
<div class="metric-label">Total Views</div>
</div>
<div class="metric-card">
<div class="metric-icon">💰</div>
<div class="metric-value">$45.2K</div>
<div class="metric-label">Total Profit</div>
</div>
<div class="metric-card">
<div class="metric-icon">📦</div>
<div class="metric-value">2,450</div>
<div class="metric-label">Total Products</div>
</div>
<div class="metric-card">
<div class="metric-icon">👥</div>
<div class="metric-value">3,456</div>
<div class="metric-label">Total Users</div>
</div>
</section>
<section class="charts-container">
<div id="revenue-chart"></div>
<div id="user-growth-chart"></div>
</section>
<section class="table-container">
<h2 class="chart-title">Recent Orders</h2>
<table>
<thead>
<tr>
<th>Order ID</th>
<th>Customer</th>
<th>Product</th>
<th>Amount</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>#1234</td>
<td>John Doe</td>
<td>Product A</td>
<td>$99.99</td>
<td><span class="status status-completed">Completed</span></td>
</tr>
<tr>
<td>#1235</td>
<td>Jane Smith</td>
<td>Product B</td>
<td>$149.99</td>
<td><span class="status status-pending">Pending</span></td>
</tr>
<tr>
<td>#1236</td>
<td>Bob Johnson</td>
<td>Product C</td>
<td>$199.99</td>
<td><span class="status status-cancelled">Cancelled</span></td>
</tr>
<tr>
<td>#1237</td>
<td>Alice Brown</td>
<td>Product D</td>
<td>$79.99</td>
<td><span class="status status-completed">Completed</span></td>
</tr>
<tr>
<td>#1238</td>
<td>Charlie Davis</td>
<td>Product E</td>
<td>$129.99</td>
<td><span class="status status-pending">Pending</span></td>
</tr>
</tbody>
</table>
</section>
</section>
</main>
<script type="module">
import { createRoot } from 'react-dom/client';
import { RevenueGraph, UserGrowthChart } from './components/dashboard-charts.tsx';
createRoot(document.getElementById('revenue-chart')).render(<RevenueGraph />);
createRoot(document.getElementById('user-growth-chart')).render(<UserGrowthChart />);
</script>
</body>
</html>
Console
0 events
No console output available to display
